<template>
  <div>
    <div class="demo-inner-divider">divider基本类型</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <e-divider />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <e-divider>With Text</e-divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <e-divider dashed />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </div>

  <div>
    <div class="demo-inner-divider">divider垂直分割线</div>
    Text
    <e-divider type="vertical" />
    <a href="#">Link</a>
    <e-divider type="vertical" />
    <a href="#">Link</a>
  </div>
  <div>
    <div class="demo-inner-divider">divider修改分割线标题的位置</div>
    <e-divider orientation="left">Left Text</e-divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <e-divider orientation="right">Right Text</e-divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <e-divider orientation="center">Center Text</e-divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </div>

  <div>
    <div class="demo-inner-divider">divider分割文字使用正文样式</div>
    <e-divider plain orientation="center">Text</e-divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <e-divider plain orientation="left">Left Text</e-divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <e-divider plain orientation="right">Right Text</e-divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </div>
  <divider-md class="markdown-body"></divider-md>
</template>

<script>
import dividerMd from "../../docs/divider.md"
export default {
  components:{
    dividerMd
  }
}
</script>